<script lang="ts" setup>
import {
  NConfigProvider,
  darkTheme,
  lightTheme,
  NMessageProvider,
  NNotificationProvider,
  NDialogProvider,
  NLoadingBarProvider,
  zhCN,
  dateZhCN,
} from "naive-ui"
import { onMounted, } from "vue"
import fullScreenLoading from "@utilCop/loading/fullScreenLoading/index.vue"
import { useAdminSettingStore } from "@/stores/admin/setting"
import { getStorage } from "@/util/cache"
import useMqtt from "@/util/mqtt/usemqtt";

const AdminSettingStore = useAdminSettingStore()
const initThemeColor = () => {
  const themeColor =
    getStorage("themeColor") == null ? AdminSettingStore.themeColor : getStorage("themeColor")
  AdminSettingStore.setThemeColor(themeColor)
}
onMounted(() => {
  initThemeColor()
})

const orgId = getStorage("orgId")

//mqtt 参数配置
const options = {
  clean: true,
  clientId: "emqx_vue3-" + Math.random().toString(36).substr(2) + Date.now().toString(36),
  //"emqx_vue3_" + Math.random().toString(16).substring(2, 8),
  connectTimeout: 10 * 1000, // ms,
  host: "ejxy.top",
  username: "tlk555666",
  password: "tlk555666",
  port: 15676,
  protocol: "wss",
  reconnectPeriod: 4000, // ms
  subscription: { topic: "organization-snack-order:" + orgId, qos: 1 } //需要动态配置
};
// 使用hoosk函数导出的值
const { data, connection, subscription } = useMqtt(options);

// console.log("connection------", connection);
// console.log("subscription----------", subscription);
// console.log("data------", data);

</script>

<template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN"
    :theme="AdminSettingStore.theme == 'light' ? lightTheme : darkTheme" :theme-overrides="{
      common: {
        primaryColor: AdminSettingStore.themeColor,
        primaryColorHover: AdminSettingStore.themeColor,
        primaryColorPressed: AdminSettingStore.themeColor,
        primaryColorSuppl: AdminSettingStore.themeColor,
      },
      Scrollbar: {
        color: `var(--themeColor)`,
        colorHover: 'var(--themeColor)',
      },
    }">
    <n-notification-provider>
      <n-dialog-provider>
        <n-loading-bar-provider>
          <n-message-provider>
            <router-view></router-view>
            <fullScreenLoading />
            <audio id="audioPlayer" controls style="display:none;">
              <source src="@/static/mp3/preview.mp3" type="audio/mp3">
            </audio>
          </n-message-provider>
        </n-loading-bar-provider>
      </n-dialog-provider>
    </n-notification-provider>
  </n-config-provider>
</template>

<style lang="scss">
@import url("@/styles/reset.scss");

#nprogress .bar {
  background: var(--themeColor) !important; //自定义颜色
}
</style>
